<template>
  <div class="stars">
    <span :class="['star'+size , item]" v-for="item in showStar"></span>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      size: {
        type: Number,
        default: 24
      },
      score: {
        type: Number,
        default: 0
      }
    },
    computed: {
      showStar () {
        let stars = []
        let scores = this.score.toString().split('.')
        // on
        for (let i = 0; i < scores[0]; i++) {
          stars.push('on')
        }
        // off
        for (let j = 0; j < 5 - scores[0]; j++) {
          stars.push('off')
        }
        return stars
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../common/scss/mixin";

  .stars {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .star24 {
      width: 10px;
      height: 10px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      &.on {
        @include bg-image('./img/star24_on');
      }
      &.off {
        @include bg-image('./img/star24_off');
      }
    }
    .star36 {
      width: 15px;
      height: 15px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      &.on {
        @include bg-image('./img/star36_on');
      }
      &.off {
        @include bg-image('./img/star36_off');
      }
    }
    .star48 {
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      &.on {
        @include bg-image('./img/star48_on');
      }
      &.off {
        @include bg-image('./img/star48_off');
      }
    }
  }
</style>
